<template>
  <div>
    <!-- 单文件上传 -->
    <!-- <el-upload
      class="avatar-uploader"
      action="http://localhost:8081/upload/img"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
    >
      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload> -->

    <!-- 多文件上传 -->
    <input type="file" multiple @change="onChange" />

    <template v-show="imgArr.length" v-for="(v, i) in imgArr">
      <img
        class="img"
        :key="i"
        :src="`http://localhost:8081/uploads/${v.filename}`"
        alt=""
      />
      ----{{ v.filename }}
    </template>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      imageUrl: "",
      imgArr: [],
    };
  },
  methods: {
    onChange(e) {
      //   console.log(e.target.files);
      let fd = new FormData();

      e.target.files.forEach((v) => {
        fd.append("file", v);
      });

      axios({
        url: "http://localhost:8081/upload/imgs",
        method: "post",
        data: fd,
      }).then((res) => {
        // console.log(res.data.data);
        this.imgArr = res.data.data;
      });
    },
    // handleAvatarSuccess(res, file) {
    //   this.imageUrl = URL.createObjectURL(file.raw);
    // },
    // beforeAvatarUpload(file) {
    //   const isJPG = file.type === "image/jpeg";
    //   const isLt2M = file.size / 1024 / 1024 < 2;
    //   console.log(file);
    //   if (!isJPG) {
    //     this.$message.error("上传头像图片只能是 JPG 格式!");
    //   }
    //   if (!isLt2M) {
    //     this.$message.error("上传头像图片大小不能超过 2MB!");
    //   }
    //   return isJPG && isLt2M;
    // },
  },
};
</script>

<style scoped>
.img {
    width: 150px;
    height: 150px;
    display: inline-block;
    border: 1px solid #ccc;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>